<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>-->
    <link href="../static/bootstrap.css" rel="stylesheet">
    <script src="../static/bootstrap.bundle.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container mt-3">
    <h3>Modal 实例</h3>
    <p>请单击按钮打开模态。</p>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
        打开模态
    </button>
</div>

<!-- 模态 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <!-- 模态标题 -->
            <div class="modal-header">
                <h4 class="modal-title">模态标题</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态主体 -->
            <div class="modal-body">
                <div style="height: 2000px">

                </div>
                模态主体 ...
            </div>
            <!-- 模态页脚 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--<nav class="navbar navbar-expand-sm navbar-dark bg-dark">-->
<!--    <div class="container-fluid">-->
<!--        <a class="navbar-brand" href="javascript:void(0)">-->
<!--            <img src="../static/honghuhuxinting.jpg" style="width: 40px;height: 40px" class="rounded-pill" alt="">-->
<!--        </a>-->
<!--        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">-->
<!--            <span class="navbar-toggler-icon"></span>-->
<!--        </button>-->
<!--        <div class="collapse navbar-collapse" id="mynavbar">-->
<!--            <ul class="navbar-nav me-auto">-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="javascript:void(0)">链接-->
<!--                    </a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="javascript:void(0)">链接-->
<!--                    </a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="javascript:void(0)">链接-->
<!--                    </a>-->
<!--                </li>-->
<!--            </ul>-->
<!--            <form class="d-flex">-->
<!--                <input class="form-control me-2" type="text"-->
<!--                       placeholder="Search">-->
<!--                <button class="btn btn-primary"-->
<!--                        type="button">Search-->
<!--                </button>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->
<!--</nav>-->
<!--<div style="height: 2000px"></div>-->
<!--<div class="container mt-3">-->
<!--    <h2>卡片页眉和页脚</h2>-->
<!--    <div class="card" style="width: 200px">-->
<!--        <div class="card-body">-->
<!--            <h4 class="card-title">卡片标题</h4>-->
<!--            <a href="#" class="card-link">卡片链接</a>-->
<!--            <a href="#" class="card-link">另一个链接</a>-->
<!--            <p class="card-text">一些实例文本。一些实例文本。</p>-->
<!--        </div>-->
<!--        <img class="card-img-bottom" src="../static/honghuhuxinting.jpg" alt="">-->
<!--    </div>-->
<!--</div>-->
<!--<div class="btn-group ">-->
<!--    <button type="button" class="btn btn-primary">华为</button>-->
<!--    <button type="button" class="btn btn-primary">大疆</button>-->
<!--    <div class="btn-group">-->
<!--        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>-->
<!--        <ul class="dropdown-menu">-->
<!--            <li><a class="dropdown-item" href="#">手机</a></li>-->
<!--            <li><a class="dropdown-item" href="#">平板电脑</a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->

<!--<div class="d-grid">-->
<!--    <button type="button"  class="btn btn-primary">-->
<!--        <span class="spinner-grow spinner-grow"></span>loading-->
<!--    </button>-->
<!--</div>-->
<!--<button type="button" class="btn btn-outline-primary btn-sm">主要</button>-->
<!--<button class="btn btn-primary active">按钮</button>-->
<!--<input type="reset" class="btn btn-danger btn-lg">-->
<!--<img class="rounded-circle img-thumbnail float-start" src="../static/honghuhuxinting.jpg" style="width: 200px;">-->
<!--<img class="rounded-circle img-thumbnail float-end" src="../static/honghuhuxinting.jpg" style="width: 200px;">-->

<!--<div class="container mt-3">-->
<!--    <h1>基础表格</h1>-->
<!--    <p>.table 类为表格添加了基本样式（浅色内边距和水平分隔线）：</p>-->
<!--    <table  class="table  table-bordered table-hover">-->
<!--        <thead>-->
<!--        <tr class="table-success">-->
<!--            <th>Firstname</th>-->
<!--            <th>Lastname</th>-->
<!--            <th>Email</th>-->
<!--        </tr>-->
<!--        </thead>-->
<!--        <tbody>-->
<!--        <tr class="table-danger">-->
<!--            <td class="table-success">Bill</td>-->
<!--            <td>Gates</td>-->
<!--            <td>bill@example.com</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>Steve</td>-->
<!--            <td>Jobs</td>-->
<!--            <td>steve@example.com</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>Elon</td>-->
<!--            <td>Musk</td>-->
<!--            <td>elon@example.com</td>-->
<!--        </tr>-->
<!--        </tbody>-->
<!--    </table>-->
<!--</div>-->
<!--<div class="container-fluid mt-3">-->
<!--    <h1>三个等宽列</h1>-->
<!--    <p>提示：请尝试在行类中添加一个 class="col" 的新 div - 将创建四个等宽的列。</p>-->
<!--    <div class="row">-->
<!--        <div class="col-sm-4 p-3 bg-primary text-white">.col</div>-->
<!--        <div class="col-sm-4 p-3 bg-dark text-white">.col</div>-->
<!--        <div class="col-sm-4 p-3 bg-primary text-white">.col</div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="container pt-3">-->
<!--    <h1>响应式容器</h1>-->
<!--    <p>请调整浏览器窗口大小来查看效果。</p>-->
<!--</div>-->
<!--<div class="container-sm border">.container-sm</div>-->
<!--<div class="container-md mt-3 border">.container-md</div>-->
<!--<div class="container-lg mt-3 border">.container-lg</div>-->
<!--<div class="container-xl mt-3 border">.container-xl</div>-->
<!--<div class="container-xxl mt-3 border">.container-xxl</div>-->


<!--<div class="container-fluid p-5 bg-primary text-white text-center">-->
<!--    <h1>我的第一张 Bootstrap 页面</h1>-->
<!--    <p>请调整这张响应式页面的大小以查看效果！</p>-->
<!--</div>-->

<!--<div class="container mt-5">-->
<!--    <div class="row">-->
<!--        <div class="col-sm-4">-->
<!--            <h3>列 1</h3>-->
<!--            <p>胜日寻芳泗水滨，无边光景一时新。</p>-->
<!--            <p>等闲识得东风面，万紫千红总是春。</p>-->
<!--        </div>-->
<!--        <div class="col-sm-4">-->
<!--            <h3>列 2</h3>-->
<!--            <p>纷纷红紫已成尘，布谷声中夏令新。</p>-->
<!--            <p>夹路桑麻行不尽，始知身是太平人。</p>-->
<!--        </div>-->
<!--        <div class="col-sm-4">-->
<!--            <h3>列 3</h3>-->
<!--            <p>远上寒山石径斜，白云生处有人家。</p>-->
<!--            <p>停车坐爱枫林晚，霜叶红于二月花。</p>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

</body>
</html>
